{% include 'base.html' %}

<style>
    .smodel-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
        margin-top: 20px;
    }

    .smodel-card {
        background: #fff;
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transition: transform 0.3s, box-shadow 0.3s;
        text-align: center;
    }

    .smodel-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    }

    .smodel-card img {
        width: 100%;
        height: 150px;
        object-fit: cover;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .action-buttons {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 10px;
    }

    .btn {
        padding: 6px 12px;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.3s;
    }

    .btn-edit {
        background-color: #3498db;
        color: white;
    }

    .btn-edit:hover {
        background-color: #2980b9;
    }

    .btn-delete {
        background-color: #e74c3c;
        color: white;
    }

    .btn-delete:hover {
        background-color: #c0392b;
    }

    .add-smodel {
        display: inline-block;
        padding: 8px 16px;
        background-color: #2ecc71;
        color: white;
        border-radius: 4px;
        margin-bottom: 20px;
    }

    .add-smodel:hover {
        background-color: #27ae60;
    }
</style>

<a href="{{ url_for('add_smodel', smodel_type_name=smodel_type_name) }}" class="add-smodel">增加{{smodel_type_name}}</a>

<div class="smodel-container">
    {% for smodel in smodels %}
    <div class="smodel-card">
        <a href="{{url_for('show_smodel', smodel_type_name=smodel_type_name, id=smodel.id)}}">
            <img src="{{url_for('static',filename=smodel.photo_path) }}" alt="{{smodel.name}}">
            <h3>{{smodel.name}}</h3>
        </a>
        <div class="action-buttons">
            <a href="{{url_for('update_smodel', smodel_type_name=smodel_type_name, id=smodel.id)}}" class="btn btn-edit">修改</a>
            <form method="POST" action="{{ url_for('delete_smodel', smodel_type_name=smodel_type_name, id=smodel.id) }}" 
                onsubmit="return confirm('确定要删除【{{ smodel.name }}】吗？此操作不可撤销！');">
                <button type="submit" class="btn btn-delete">删除</button>
            </form>
        </div>
    </div>
    {% endfor %}
</div>